<template>
	<div class="card__body-container layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">
			<el-form v-show="state.showSearch" :model="state.queryParams" ref="queryFormRef" inline>
				<el-form-item label="提现单号" prop="withdrawal_no">
					<el-input v-model="state.queryParams.withdrawal_no" placeholder="请输入提现单号" />
				</el-form-item>
				<el-form-item label="申请时间" prop="time">
					<el-date-picker
						v-model="state.queryParams.time"
						type="datetimerange"
						start-placeholder="开始时间"
						end-placeholder="结束时间"
						format="YYYY/MM/DD HH:mm:ss"
						value-format="X"
						:default-time="state.defaultTime"
					/>
				</el-form-item>
				<el-form-item label="关联供应商" prop="supplier_id">
					<el-select
						v-model="state.queryParams.supplier_id"
						clearable
						placeholder="请输入关键字/选择供应商"
						filterable
						remote
						:remote-method="supplierIdRemoteMethod"
						remote-show-suffix
						:loading="state.supplierIdSelect.loading"
						@focus="onSupplierIdFocus"
					>
						<el-option v-for="item in state.supplierIdSelect.options" :key="item.id" :label="item.name" :value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onQuery">
						<el-icon>
							<ele-Search />
						</el-icon>
						查 询
					</el-button>
					<el-button @click="onResetQuery">
						<el-icon>
							<ele-Refresh />
						</el-icon>
						重 置
					</el-button>
				</el-form-item>
			</el-form>
			<el-row :gutter="10" class="top-block">
				<RightToolbar v-model:showSearch="state.showSearch" @queryTable="getList" />
			</el-row>
			<el-tabs v-model="state.queryParams.type">
				<el-tab-pane :label="state.numData.number1" :name="1" />
				<el-tab-pane :label="state.numData.number2" :name="2" />
				<el-tab-pane :label="state.numData.number3" :name="3" />
			</el-tabs>
			<el-table :data="state.tableList" v-loading="state.loading">
				<el-table-column label="编号" align="center" prop="id" />
				<el-table-column label="提现单号" align="center" prop="withdrawal_no" />
				<el-table-column label="所属供应商" align="center" prop="supplier_name" width="100" />
				<el-table-column label="订单数" align="center" prop="order_num">
					<template #default="{ row }">
						<el-link @click="onPurchaseOrder(row)" type="primary">{{ row.order_num }}</el-link>
					</template>
				</el-table-column>
				<el-table-column label="货款总额" align="center" prop="supplier_amt" />
				<el-table-column label="总运费" align="center" prop="trans_amt" />
				<el-table-column label="售后退款总额" align="center" prop="after_supplier_amt" width="110" />
				<el-table-column label="提现手续费信息" align="center" prop="rate_info" width="140">
					<template #default="{ row }">
						<el-row type="flex" justify="center">
							<div style="text-align: left">
								手续费率：{{ formatterCommission(row) }}‰<br />
								手续费：{{ row.commission_money }}
							</div>
						</el-row>
					</template>
				</el-table-column>
				<el-table-column label="应到货款总额" align="center" prop="money_answer" width="110" />
				<el-table-column label="实到货款总额" align="center" prop="money_reality" width="110" />
				<el-table-column label="收款信息" align="center" prop="collection_info" width="250">
					<template #default="{ row }">
						<el-row type="flex" justify="center">
							<div style="text-align: left">
								收款人：{{ row.bank_user_name }}<br />
								开户行：{{ row.bank_name }}<br />
								收款卡号：{{ row.bank_card }}
							</div>
						</el-row>
					</template>
				</el-table-column>
				<el-table-column label="状态" align="center" prop="status" :formatter="formatterStatus" />
				<el-table-column label="申请时间" align="center" prop="create_time" :formatter="formatterCreateTime" width="100" />
				<template v-if="state.queryParams.type > 1">
					<el-table-column label="审核时间" align="center" prop="check_time" :formatter="formatterCheckTime" width="100" />
					<el-table-column label="审核人" align="center" prop="username" />
				</template>
				<el-table-column v-if="state.queryParams.type === 3" label="拒绝原因" align="center" prop="reason">
					<template #default="{ row }">
						<el-popover v-if="row.reason" placement="top" title="拒绝原因" :width="200" trigger="hover" :content="row.fail_reason">
							<template #reference>
								<el-button>查看</el-button>
							</template>
						</el-popover>
						<span v-else>----</span>
					</template>
				</el-table-column>
				<el-table-column v-if="state.queryParams.type === 1" label="操作" align="center" prop="operation" fixed="right">
					<template #default="{ row }">
						<el-button type="primary" link @click="onAuditWithdraw(row)"> 审核提现 </el-button>
					</template>
				</el-table-column>
			</el-table>
			<PaginationComponent
				v-if="state.total"
				:total="state.total"
				v-model:page="state.queryParams.pageNum"
				v-model:limit="state.queryParams.pageSize"
				@pagination="getList"
			/>
		</el-card>
		<SupplierWithdrawTrialDialog ref="supplierWithdrawTrialDialogRef" />
		<PurchaseOrderDialog ref="purchaseOrderDialogRef" />
	</div>
</template>

<script setup lang="ts" name="supplierWithdrawTrial">
import { inject, onMounted, reactive, ref, defineAsyncComponent, watch } from 'vue';
import { goodsApi, supplierWithdrawalApi } from '/@/api';
import { floatMultiply, timeDictionary } from '/@/utils/dictionary';

const SupplierWithdrawTrialDialog = defineAsyncComponent(() => import('./dialog/supplierWithdrawTrialDialog.vue'));
const PurchaseOrderDialog = defineAsyncComponent(() => import('./dialog/purchaseOrderDialog.vue'));

const Dayjs: any = inject('dayjs');
const GoodsApi = goodsApi();
const SupplierWithdrawalApi = supplierWithdrawalApi();
// 定义变量内容
const state = reactive({
	showSearch: true,
	queryParams: {
		type: 1,
		withdrawal_no: '',
		time: [],
		supplier_id: '',
		pageNum: 1,
		pageSize: 10,
	},
	tableList: [],
	loading: false,
	total: 0,
	defaultTime: [
		new Date(Dayjs().year(), Dayjs().month(), Dayjs().date(), 0, 0, 0),
		new Date(Dayjs().year(), Dayjs().month(), Dayjs().date(), 23, 59, 59),
	],
	supplierIdSelect: {
		loading: false,
		options: [] as any,
	},
	numData: {
		number1: '待审核',
		number2: '审核同意',
		number3: '审核拒绝',
	},
});
const queryFormRef = ref();
const purchaseOrderDialogRef = ref();
const supplierWithdrawTrialDialogRef = ref();

onMounted(() => {
	getList();
});
watch(
	() => state.queryParams.type,
	() => onQuery()
);

/********** 触发事件 **********/
// 供应商获取焦点
const onSupplierIdFocus = () => {
	if (state.queryParams.supplier_id) return;
	_goodsSelectSupplier({ pageNum: 1, pageSize: 10 });
};
// 查询
const onQuery = () => {
	state.queryParams.pageNum = 1;
	getList();
};
// 重置查询
const onResetQuery = () => {
	queryFormRef.value.resetFields();
	onQuery();
};
// 货款订单
const onPurchaseOrder = (row: Object) => {
	purchaseOrderDialogRef.value.openDialog({
		...row,
		type: state.queryParams.type,
	});
};
// 审核提现
const onAuditWithdraw = (row: Object) => {
	supplierWithdrawTrialDialogRef.value.openDialog(row, () => getList());
};

/********** 方法事件 **********/
// 刷新列表
const getList = () => {
	state.loading = true;
	_supplierWithdrawalNum({
		...state.queryParams,
		time_start: state.queryParams.time ? state.queryParams.time[0] : '',
		time_end: state.queryParams.time ? state.queryParams.time[1] : '',
	});
	_supplierWithdrawalList({
		...state.queryParams,
		time_start: state.queryParams.time ? state.queryParams.time[0] : '',
		time_end: state.queryParams.time ? state.queryParams.time[1] : '',
	});
};
// 供应商搜索选择
const supplierIdRemoteMethod = (query: string) => {
	if (!query) return;
	_goodsSelectSupplier({ pageNum: 1, pageSize: 10, title: query });
};
// 状态字典
const formatterStatus = (row: any) => {
	switch (row.status) {
		case 1:
			return '待审核';
		case 2:
			return '审核通过';
		case 3:
			return '审核拒绝';
		default:
			return '未知状态';
	}
};
// 申请时间字典
const formatterCreateTime = (row: any) => {
	return timeDictionary(row.create_time);
};
// 审核时间字典
const formatterCheckTime = (row: any) => {
	return timeDictionary(row.check_time);
};
// 手续费率字典
const formatterCommission = (row: any) => {
	return floatMultiply(row.commission, 1000);
};

/********** 网络事件 **********/
// 选择供应商
const _goodsSelectSupplier = (params: Object) => {
	state.supplierIdSelect.loading = false;
	GoodsApi.goodsSelectSupplier(params)
		.then((res) => {
			state.supplierIdSelect.options = res.data.list;
		})
		.catch(() => (state.supplierIdSelect.loading = false));
};
// 初审列表
const _supplierWithdrawalList = (params: Object) => {
	SupplierWithdrawalApi.supplierWithdrawalList(params)
		.then((res) => {
			state.tableList = res.data.list;
			state.total = res.data.total;
			state.loading = false;
		})
		.catch(() => (state.loading = false));
};
// 查询列表数量
const _supplierWithdrawalNum = (params: Object) => {
	SupplierWithdrawalApi.supplierWithdrawalNum(params).then((res) => {
		const info = res.data.info;
		state.numData = {
			number1: info.number1 ? `待审核【${info.number1}】` : '待审核',
			number2: info.number2 ? `审核同意【${info.number2}】` : '审核同意',
			number3: info.number3 ? `审核拒绝【${info.number3}】` : '审核拒绝',
		};
	});
};
</script>
